<template>
	<view>
		<view class="job-manage-main">
			<view v-for="(item, index) in list" :key="index">
				<navigator hover-class="hoverClass2" :url="'/pages/recruit/position-detail/index?id=' + item.id">
					<view :class="{'job-itme': true, 'close': !item.state == 0}">
						<view class="left-box">
							<view class="t1">{{ item.position }}<text>{{item.salary}}</text></view>
							<view class="t2"><text class="text-overflow t2-txt">{{item.company_address || '-'}}</text>
								<text class="seizeSeat"></text>{{item.education || '-'}}
								<text class="seizeSeat"></text>{{item.experience || '-'}}
							</view>
						</view>
						<view class="right-box">
							{{item.state == 0 ? '' : '已关闭'}}
							<text class="iconfontPT iconxiayibu"></text>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<btnTpl @confirmEvent="signEvent">发布新职位</btnTpl>
	</view>
</template>

<script>
	import btnTpl from '../../components/recruit/btn-tpl.vue'
	import {
		getPositionList
	} from '../../../apis/recruit/index.js'

	export default {
		data() {
			return {
				list: [],
				page: 1,
				moreState: false
			}
		},
		onShow() {
			this.getInitDataInfo();
		},
		components: {
			btnTpl
		},
		onReachBottom() {
			let _this = this;

			if (_this.moreState) {
				_this.page = parseInt(_this.page) + 1

				_this.getInitDataInfo()
			}
		},
		methods: {
			getInitDataInfo() {
				let _this = this;
				getPositionList({
					page: _this.page
				}).then(res => {
					if (res.code == 1) {
						if (res.data.length == 0) {
							_this.moreState = false

						} else {
							_this.list = res.data
							_this.moreState = true
						}
					}
				})
			},
			signEvent() {
				uni.navigateTo({
					url: '/pages/recruit/add-position/index'
				})
			}
		}
	}
</script>

<style lang="less">
	.job-manage-main {
		padding: 0 30rpx;
	}

	.job-itme {
		padding: 39rpx 0;
		border-bottom: 1rpx solid #ccc;

		&.close {
			color: #999
		}
	}



	.seizeSeat {
		display: inline-block;
		width: 40rpx;
	}

	.left-box {
		width: calc(100% - 120rpx);
		height: 80rpx;
		display: inline-block;

		.t1 {
			font-size: 34rpx;
			font-weight: bold;
			line-height: 34rpx;

			text {
				font-size: 30rpx;
				font-weight: bold;
				padding-left: 28rpx;
				line-height: 28rpx;
			}
		}

		.t2 {
			font-size: 24rpx;
			line-height: 24rpx;
			margin-top: 20rpx;
			color: #999;

			.t2-txt {
				max-width: 50%;
				display: inline-block;
				vertical-align: top;
			}
		}

	}

	.right-box {
		width: 120rpx;
		height: 80rpx;
		display: inline-block;
		text-align: right;
		font-size: 24rpx;
		line-height: 80rpx;
		vertical-align: top;
	}

	.job-itme.close .right-box .iconfontPT {
		font-size: 24rpx;
	}

	.job-itme.close .right-box {
		color: #999;
	}
</style>
